本篇文章目錄

1. 前言：為什麼醫藥工具箱對表單元件的要求特別高？
2. <input type="number"> 的核心屬性與邊界防禦（min / max / step）
3. <select> 與 <option> 下拉選單的語意設定與預設值技巧
4. 複選情境剖析：<input type="checkbox"> 與視覺優化
5. 結語

一、 前言：為什麼醫藥工具箱對表單元件的要求特別高？

在一般電商或會員系統中，表單填錯資料頂多跳出錯誤提示；但在醫藥與健康工具中，數值錯置可能導致極大的計算偏差！

例如：

• 生理指標計算器中，體重如果不小心輸入成負數（60 kg），計算出的 BMR/TDEE 就會完全失真。
• 兒童劑量換算器中，年齡如果填入 22 歲（超出 1-17 歲兒童範圍），計算結果就失去了輔助參考的價值。

因此，在 [Day 04] 中，我們將深入解析表單元件的原生驗證屬性，確保使用者在輸入資料時，就能被 HTML 原生機制做第一層的防禦！

二、 <input type="number"> 的核心屬性與邊界防禦

針對數值輸入，HTML5 提供的原生 type="number" 擁有豐富的邊界防禦屬性。我們以「BMI/BMR 計算器」與「兒童劑量換算器」的輸入框為例：

核心屬性解析：

• min / max：設定數值的允許區間。輸入超出範圍的數值時，原生表單驗證會擋下，且使用者在點擊輸入框右側的上下微調按鈕時，不會超出此邊界。
• step：設定數值加減的步階間隔。
  • 體重設定 step="0.1"，代表允許輸入到小數點第一位（如 60.5）。
  • 年齡設定 step="1"，代表只接受整數。
• placeholder：提示輸入範例，能有效引導使用者填入預期格式的數據。
• required：聲明此欄位為必填。

三、 <select> 與 <option> 下拉選單的語意設定與預設值技巧

當輸入項目的選項是固定且有限的（如性別、日常活動量、計算公式選擇），使用 <select> 下拉選單是最好的選擇，這能完全避免使用者的打字錯誤！

開發關鍵技巧：

1. value 屬性是 JS 讀取的核心：

   在 <option> 標籤中，使用者在畫面上看到的是文字（如「久坐 / 幾乎不運動」），但我們在 value 中直接寫入計算公式需要的係數（如 1.2）。這樣之後寫 JS 時，只要用 document.getElementById('activity').value 就能直接拿到數字進行乘法運算！

2. selected 預設選取：

   可以為最常出現的選項加上 selected 屬性，預設帶入常用值，節省使用者的操作時間。

四、 複選情境剖析：<input type="checkbox"> 與視覺優化

在「Tool 3：每日用藥時間表生成器」中，一個藥品可能會在多個時段服用（例如：早餐、晚餐都需要吃）。這種「可多選」的情境就是使用 <checkbox> 的標準時機：

a11y 與防錯細節：

將 <input type="checkbox"> 包裹在 <label> 標籤內部，使用者點擊文字（如「早餐 (早)」）也能直接觸發勾選，大幅提升手機端與長輩操作時的點擊命中率！

五、 結語

今天我們詳細剖析了《醫藥健康小工具箱》中所使用的各類 HTML 表單元件與限制屬性。精準的屬性設定不僅能保障資料品質，更是優化使用者體驗第一道不可或缺的防線。

在明天的 [Day 05] 中，我們將進入 CSS 的世界，正式開始規劃馬卡龍風格的色調變數（CSS Variables）與基礎 Reset 樣式！